<template>
    <div id="header_image" v-if="!close">
        <div class="container">
            <div class="txt">
                <a :href="imgdata.url">
                    <img class="ban" :src="imgdata.picture" alt="">
                </a>
            </div>
            <div class="close" @click="close = true">
                <i class="el-icon-circle-close"></i>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                close: false,
                imgdata:{}
            }
        },
        mounted () {
            this.getBanner();
        },
        methods: {
            // 获取顶部广告图
            async getBanner() {
                let res = await this.$axios.post("/port/index/topic", { key: this.$key, id: "0" })
                //  console.log(res);
                let code = res.data.code
                if (code == 200) {
                    this.imgdata = res.data.data
                }
            }
        },
    }
</script>

<style lang="scss" scoped>
#header_image {
    width: 100%;
    height: 100px;
    margin: 0 auto;
    text-align: center;
    box-shadow:  0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    .container {
        width: 100%;
        margin: 0 auto;
        height: 100px;
        position: relative;
        left: 0;
        top: 0;
        .txt {
            // line-height: 100px;
            a {
                text-decoration: none;
                .ban {
                    width: 100%;
                    height: 100px;
                }
            }
        }
        .close {
            position: absolute;
            right: 20%;
            top: 10px;
        }
    }
}
</style>